import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card } from 'antd'
//这里必须要引入less
import AwesomeSwiper from 'react-awesome-swiper'
import './style.less'
import imgurl1 from '../../../images/1.jpg'
import imgurl2 from '../../../images/2.jpg'
import imgurl3 from '../../../images/3.jpg'
class CarsousedComponent extends Component {
  swiperRef = null //用于元素
  constructor(props) {
    super(props)
    this.state = {
      message: 'Gallery',
      text: '这就是测试数据',
      defaultActiveKey: ['1'],
      config: {
        loop: true,
        observer: true, //调完接口不能翻页解决方法，修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //调完接口不能翻页解决方法，修改swiper的父元素时，自动初始化swiper

        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // Disable preloading of all images
        preloadImages: false,
        // Enable lazy loading
        lazy: true,
        speed: 500,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination',
          bulletElement: 'li',
          hideOnClick: true,
          clickable: true,
        },
        on: {
          slideChange: function () {
            console.log(this.activeIndex)
          },
        },
      },
    }
    this.goNext = this.goNext.bind(this)
  }
  componentDidMount() {}
  render() {
    return (
      <Fragment>
        <ContentWrap>
          {/*基础版本知识点*/}
          <CardWrap>
            <Card title="react-awesome-swiper轮播图">
              <p>1.less里面最关键的就是一个opacity</p>
              <p>2.无特定需求高度可以依据宽度来定</p>
              <p>3. swiper-pagination 表示分页节点</p>
              <p>4.swiper-button-prev,swiper-button-next 表示上下一个按钮</p>
              <p>5.剩下的参数请参考swiper</p>
            </Card>
          </CardWrap>
          {/*基础版本知识点*/}
          <CardWrap>
            <Card title="使用react-awesome-swiper轮播图">
              <AwesomeSwiper
                ref={(ref) => (this.swiperRef = ref)}
                config={this.state.config}
                className="swiperAll"
              >
                <div className="swiper-wrapper">
                  <div className="swiper-slide">
                    <img src={imgurl1} alt="" />
                  </div>
                  <div className="swiper-slide">
                    <img src={imgurl2} alt="" />
                  </div>
                  <div className="swiper-slide">
                    <img src={imgurl3} alt="" />
                  </div>
                  <div className="swiper-slide">
                    <img src={imgurl1} alt="" />
                  </div>
                  <div className="swiper-slide">
                    <img src={imgurl2} alt="" />
                  </div>
                  <div className="swiper-slide">
                    <img src={imgurl3} alt="" />
                  </div>
                </div>
                <div className="swiper-button-prev"></div>
                <div className="swiper-button-next"></div>
                <div className="swiper-pagination"></div>
              </AwesomeSwiper>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }
  goNext(e) {
    //这里面的 e是个数组获取到key值,如果是都展开的就存储所有的key,都收缩的就是空
    console.log(e)
  }
}

export default CarsousedComponent
